<template>

  <div class="zhanshi">

    <!-- top -->
    <div class="top" :class="{'top-fd':fangda_flag}">
      <div ref="" class="top-left" :class="{'top-left-fd':fangda_flag}">
        <!-- <line-chart width="750px" height="352px" /> -->
        <img src="@/assets/index_images/fangda.png" alt="" class="fangda" @click="fangda">
        <div class="num">实时心率： <span>{{ this.last_num }}</span></div>
        <div class="line-h " :class="{'line-h-fd':fangda_flag}">
          <line-chart2
            v-if="flag"
            ref="line2"
            width="100%"
            :chart_data="chart_data"
            :chart_x="chart_x"
            height="100%"
          />

        </div>

      </div>
      <div v-show="!fangda_flag" class="top-right">
        <div class="top-right-top">
          <div class="h1">课堂达标情况</div>
          <h2>有效运动负荷</h2>
          <!-- 进度条-->
          <div class="line-body">
            <div class="line">
              <div class="icon">
                <img src="@/assets/login_images/huo.png" alt="">
              </div>
              <div class="ct">
                <div class="zb">{{ this.trimpchu }}%</div>
              </div>
              <div class="rt">达标</div>
            </div>
            <div class="line line2">
              <div class="icon">
                <img src="@/assets/login_images/zhong.png" alt="">
              </div>
              <div class="ct">
                <div class="zb"> {{ timechu }}%</div>
              </div>
              <div class="rt">偏低</div>
            </div>
          </div>
          <!-- 进度条-->
          <h2>结构</h2>
          <!-- <div class="tag-body">
            <div class="tag-item" :class="{'success':this.structure.start}">
              <span>开始部分</span>
              <div class="tag-icon el-icon-success" />
            </div>
            <div class="tag-item " :class="{'warn':this.structure.read}">
              <span>基础部分</span>
              <div class="tag-icon el-icon-warning" />
            </div>
            <div class="tag-item " :class="{'loading':!this.structure.basic}">
              <span>准备部分</span>
              <div class="tag-icon el-icon-error" />
            </div>
            <div class="tag-item " :class="{'finish':!this.structure.end}">
              <span>结束部分</span>
              <div class="tag-icon el-icon-more" />
            </div>
          </div> -->

          <div class="tag-body">
            <div class="tag-item" :style="{'background':this.structure.startProgress}">
              <span>开始部分</span>
              <div
                class="tag-icon "
                :class="{'el-icon-success':this.structure.startResult==='standard','el-icon-warning':this.structure.startResult==='high',
                         'el-icon-error':this.structure.startResult==='low','el-icon-more':this.structure.startResult==='going'}"
              />
            </div>
            <div class="tag-item " :style="{'background':this.structure.basicProgress}">
              <span>基础部分</span>
              <div
                class="tag-icon "
                :class="{'el-icon-success':this.structure.basicResult==='standard','el-icon-warning':this.structure.basicResult==='high',
                         'el-icon-error':this.structure.basicResult==='low','el-icon-more':this.structure.basicResult==='going'}"
              />
            </div>
            <div class="tag-item " :style="{'background':this.structure.readProgress}">
              <span>准备部分</span>
              <div
                class="tag-icon "
                :class="{'el-icon-success':this.structure.readResult==='standard','el-icon-warning':this.structure.readResult==='high',
                         'el-icon-error':this.structure.readResult==='low','el-icon-more':this.structure.readResult==='going'}"
              />
            </div>
            <div class="tag-item " :style="{'background':this.structure.endProgress}">
              <span>结束部分</span>
              <div
                class="tag-icon "
                :class="{'el-icon-success':this.structure.endResult==='standard','el-icon-warning':this.structure.endResult==='high',
                         'el-icon-error':this.structure.endResult==='low','el-icon-more':this.structure.endResult==='going'}"
              />
            </div>
          </div>
        </div>

        <div class="b-right top-right-center">
          <h1 class="title">运动安全预警</h1>
          <div class="b-body">
            <span
              v-for="item of this.warningList"
              :key="item"
              class="name"
            >{{ item }}</span>
            <span
              v-if="this.warningList.length==0"
              class="name"
            >暂无人员</span>
            <!-- <span class="name">张珊珊</span>
            <span class="name">张珊珊</span> -->
          </div>
        </div>
        <div class="b-left top-right-bot">
          <!-- <h1 class="title">强度区间分布</h1> -->
          <bar-chart
            v-if="flag"
            ref="bar"
            :bar_data="bar_data"
            width="100%"
            height="100%"
          />

        </div>
      </div>
    </div>

    <!-- <div v-show="!fangda_flag" class="center" /> -->
    <!-- bot -->
    <!-- <div v-show="!fangda_flag" class="bot">
      <div class="b-left">
        <h1 class="title">强度区间分布</h1>
        <bar-chart v-if="flag" width="100%" height="200px" />

      </div>
      <div class="b-right">
        <h1 class="title">运动安全预警</h1>
        <div class="b-body">
          <span class="name">张珊珊</span>
          <span class="name">张珊珊</span>
          <span class="name">张珊珊</span>
        </div>
      </div>
    </div> -->

  </div>

</template>

<script>
import BarChart from './BarChart.vue'
import LineChart from './lineChart.vue'
import LineChart2 from './lineChart2.vue'
import Index from '@/api/index.js'
export default {
  name: 'ZhanShiZhengti',
  components: {
    LineChart,
    LineChart2,
    BarChart
  },
  props: {
    class_value: [String, Number],
    starttime: [String]
  },
  data() {
    return {
      flag: false,
      fangda_flag: false,
      timerObj: {}, // 计时器存储器
      timerId: 1, // 模拟计时器id，唯一性
      chart_data: [],
      chart_x: [],
      bar_data: [],
      structure: {},
      warningList: [],
      timechu: '',
      trimpchu: '',
      last_num: 0// 最后心率
    }
  },
  watch: {
    'flag': function(val) {
      console.log('flagchange')
      if (val) {
        this.chart()
        this.start()
        this.chart2()
        this.start2()
      } else {
        this.stop()
      }
    }
  },
  beforeDestroy() {
    this.stop()
  },
  mounted() {
    console.log(this.class_value)
    // this.initWebSocket();
  },
  methods: {
    fangda() {
      this.fangda_flag = !this.fangda_flag
      // console.log(this)
      this.$nextTick(() => {
        this.$refs.line2.resize()
      })
    },
    start() {
      const id = this.timerId++
      this.timerObj[id] = true
      const that = this
      async function timerFn() {
        if (!that.timerObj[id]) return
        const data = {
          ClassID: that.class_value,
          StartTime: that.starttime
        }
        const result = await Index.ClassHeartRateChart(data) // 模拟请求
        if (result.code === window.g.SUCCESS_STATE) {
          that.chart_data = result.result.data
          that.chart_x = result.result.time
          that.last_num = that.chart_data[that.chart_data.length - 1]
          that.$refs.line2.initChart()
        }
        setTimeout(timerFn, 1000 * 6)
      }
      timerFn()
    },
    stop() {
      this.timerObj = {}
    },

    async chart() {
      const data = {
        ClassID: this.class_value,
        StartTime: this.starttime
      }
      const result = await Index.ClassHeartRateChart(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.chart_data = result.result.data
        this.chart_x = result.result.time
        this.$refs.line2.initChart()
      }
    },
    async chart2() {
      const data = {
        ClassID: this.class_value,
        StartTime: this.starttime
      }
      const result = await Index.CalssStructuralDistribution(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.bar_data = result.result.data
        this.structure = result.result.structure
        this.warningList = result.result.warningList
        // 处理百分数
        var time1 = result.result.currenttime / result.result.timemarkline
        var trimp1 = result.result.currenttrimp / result.result.trimpmarkline
        if (isNaN(time1)) {
          this.timechu = 0
        } else {
          this.timechu = (time1 / 100).toFixed(1)
        }
        if (isNaN(trimp1)) {
          this.trimpchu = 0
        } else {
          this.trimpchu = (trimp1 / 100).toFixed(1)
        }
        this.$refs.bar.initChart()
      }
    },
    start2() {
      const id = this.timerId++
      this.timerObj[id] = true
      const that = this
      async function timerFn() {
        if (!that.timerObj[id]) return
        const data = {
          ClassID: that.class_value,
          StartTime: that.starttime
        }
        const result = await Index.CalssStructuralDistribution(data) // 模拟请求
        if (result.code === window.g.SUCCESS_STATE) {
          that.bar_data = result.result.data
          that.structure = result.result.structure
          that.$refs.bar.initChart()
        }
        setTimeout(timerFn, 1000 * 6)
      }
      timerFn()
    }

  }
}
</script>

<style lang="scss" scoped>
.line-h{
  height: 700px;
  &.line-h-fd{
    height: 100%;
  }
}
.tag-body{
  display: flex;
  flex-wrap: wrap;
  .tag-item{
    margin-bottom: 18px;
    // margin-right: 18px;
    // width: 120px;
    margin-right: 10px;
    width: 110px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    padding: 0 14px;
    box-sizing: border-box;
    span{
      font-size: 14px;
      float: left;
    }
    .tag-icon{
      font-size: 20px;
      line-height: 32px;
      float: right;
      width: 20px;
      height: 20px;
      // margin-top: 6px ;
    }
    &.success{
      background-color: #d7f4d3;
      span{
        color: #2EA121;
      }
      .tag-icon{
        color:#41CB89 ;
      }
    }
    &.warn{
      background-color: #ffe7cc;
      span{
        color: #ffb362;
      }
      .tag-icon{
        color: #ffb362;
      }
    }
    &.loading{
      background-color: rgba(118, 157, 247, 0.2);
      span{
        color: rgba(36, 75, 164, 1);
      }
      .tag-icon{
        color:rgba(36, 75, 164, 1);
      }
    }
    &.finish{
      background-color: rgba(127, 59, 245, 0.2);
      span{
        color:rgba(88, 32, 186, 1)
      }
      .tag-icon{
        color:rgba(88, 32, 186, 1)
      }
    }
  }
}
@keyframes rotate {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
.line-body{
  display: flex;
  .line{
    overflow: hidden;
    margin-bottom: 13px;
    div{
      display: inline-block;
    }
    .icon{
      float: left;
      width: 25px;
      height: 25px;
      // background-color: black;
      img{
        width: 100%;
      }
    }
    .ct{
      margin-left: 5px;
      // margin-left: 10px;
      margin-top: 2.5px;
      float: left;
      max-width: 200px;
      width: 180px;
      height: 20px;
      position: relative;
      background-color: #4a90e2;
      // transform: translate(-50%, -50%);
      overflow: hidden;
      .zb{
        position: absolute;
        left: 50%;
        color: white;
        z-index: 9999;
      }
      .zb::before,
      .zb::after{
          content: "";
          position: absolute;
          width: 400px;
          height: 400px;
          top: 0;
          left: 214px;
          background-color: rgba(255, 255, 255, .4);
          border-radius: 45%;
          transform: translate(-50%, -70%) rotate(0);
          animation: rotate 6s linear infinite;
          z-index:1;
      }
      .zb::after {
          border-radius: 47%;
          background-color: rgba(255, 255, 255, .9);
          transform: translate(-50%, -70%) rotate(0);
          animation: rotate 10s linear -5s infinite;
          z-index: 20;
      }
    }
    .rt{
      margin-left: 10px;
      line-height: 25px;
      float: left;
      font-size: 12px;
      color: black;
    }
  }
  .line2{
    .ct{
      background-color: #ffb362;
      .zb{
        left: 30%;
      }
    }

  }
}
.zhanshi{
  // padding: 30rpx;
  position: relative;
  .top{
    overflow: hidden;
    // padding-left: 25px;
    // height: 400px;
    &.top-fd{
      height: 600px;
    }
    .top-left{
      position: relative;
      margin-top: 20px;
      float: left;
      height:100%;
      // width: 750px;
      width: calc(100% - 528px - 20px);
      // background-color: blue;
      &.top-left-fd{
        width: 100%;
        height: 100%;
      }
      .fangda{
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;;;
        z-index: 9999;
      }
      .num{
        z-index: 9999;
        position: absolute;
        right: 60px;
        top: 0;
        color: #000000;
        font-size: 14px;
        span{
          font-size: 18px;
          color: #F2637B;
        }
      }
    }
    .top-right{
      float: right;
      width: 528px;

      .top-right-top{
        margin:20px 0 0 0;
        height: 230px;
        background: #FFFFFF;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        padding: 20px;
        box-sizing: border-box;
      }
      .h1{
        font-size: 14px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      h2{
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
    }
  }
  .center{
    height: 24px;
    background: #f0f2f5;
  }
  .bot{
    overflow: hidden;
    background-color: white;
    .b-left{
      float: left;
      width: calc(100% - 328px - 20px);
      .title{
        font-size: 16px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        border-bottom: 1px solid #E9E9E9;
        padding: 20px;
      }
      .chart{
        height: 352px;
      }
    }

  }
}
.b-right{
  margin:20px 0 0 0;
  // float: right;
  // width: 528px;
  // min-height: 140px;
  // height: 352px;
  background: #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  box-sizing: border-box;
  .title{
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    border-bottom: 1px solid #E9E9E9;
    padding: 20px;
  }
  .b-body{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 20px;
    .name{
      height: 32px;
      line-height: 32px;
      width: 88px;
      text-align: center;
      // margin-right: 30px;
      margin-right:8px;
      color: white;
      font-size: 16px;
      background-color: #FF8900;
      margin-bottom: 20px;
    }
  }
}
.b-left{
  // float: left;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  // width: 528px;
  margin-top: 20px;
  height: 300px;
  .title{
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    border-bottom: 1px solid #E9E9E9;
    padding: 20px;
  }
  .chart{
    height: 352px;
  }
}

@media screen and (max-width:1400px) {
  .zhanshi .top .top-right{
    width: 310px;
  }
  .zhanshi .top .top-left{
    width: calc(100% - 310px - 20px);
  }
  .zhanshi .top .top-right .top-right-top{
    height: auto;
    padding:  5px;
  }
  .line-body .line .ct{
    width: 80px;
  }
  .b-right{
    margin-top: 5px;
  }
  .b-right .b-body .name{
    font-size: 14px;
    height: 26px;
    line-height: 26px;
    width: 66px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .b-right .b-body{
    padding: 10px;
  }
  .b-right .title{
    padding: 5px 20px;
  }
  .b-left{
    margin-top: 5px;
    height: 240px;
  }
  .zhanshi .top .top-right h2{
    margin: 5px auto;
  }
  .tag-body .tag-item{
    margin-bottom: 5px;
  }
  .line-h{
    height: 500px;
  }
}
@media screen and (max-width:1200px) {
  .b-left{
    margin-top: 5px;
    height: 200px;
  }
}
</style>
